<template>
	<view class="container">
		<view class="meter_box" v-if="selectShow" @click.stop="selectShow = !selectShow">
			<uni-card title="选择电表">
				<view class="meter_select">
					<u--input placeholder="输入电表号搜索" border="surround" v-model="meterQueryForm.electricityNo"
						@change="getMeterList"></u--input>
					<u-list height="500rpx">
						<u-list-item v-for="(item, index) in meterList" :key="index">
							<u-cell :title="item.electricityNo" @click="selectMeter(item)">
								<view slot="value">
									<u-tag v-if="item.ownerId && !item.operatorCode" text="业主侧" plain size="mini"
										shape="circle"></u-tag>
									<u-tag v-if="!item.ownerId && item.operatorCode" text="运营商侧" plain size="mini"
										shape="circle"></u-tag>
									<u-tag v-if="item.ownerId && item.operatorCode" text="业主侧" plain size="mini"
										shape="circle"></u-tag>
									<u-tag v-if="!item.ownerId && !item.operatorCode" text="未绑定" plain size="mini"
										shape="circle"></u-tag>
								</view>
							</u-cell>
						</u-list-item>
					</u-list>
				</view>
			</uni-card>
		</view>
		<u-sticky v-if="currentMeterId">
			<view>电表：{{currentMeter.electricityNo}}</view>
			<u-icon name="rewind-right-fill" @click="selectShow = !selectShow"></u-icon>
		</u-sticky>
		<view class="record_list" v-if="currentMeterId && recordList && recordList.length">
			<uni-card v-for="item in recordList" :key="item.id" margin="10" padding="8">
				<view class="item_img">
					<u-swiper :list="item.list" keyName="fileUrl" indicator></u-swiper>
				</view>
				<view class="item_body">
					<view class="item_row">
						<view class="item_cell">
							<text class="item_tips">本期电流值:</text>
							<u-tag type="info" size="mini" :text="item.currentValue"></u-tag>
						</view>
						<view class="item_cell">
							<text class="item_tips">本期电表度数:</text>
							<u-tag type="info" size="mini" :text="item.electricityBillDegree"></u-tag>
						</view>
					</view>
					<view class="item_row">
						<view class="item_cell">
							<text class="item_tips">本期用电量:</text>
							<u-tag type="info" size="mini" :text="item.electricityConsumption"></u-tag>
						</view>
						<view class="item_cell">
							<text class="item_tips">本期PUE值:</text>
							<u-tag type="info" size="mini" :text="item.pueValue"></u-tag>
						</view>
					</view>
				</view>
				<template #actions>
					<view class="item_actions">
						<view class="item_actions_item" @click="actions({type:'view',data:item})">
							<u-icon name="eye-fill"></u-icon>
							<text class="actions_text">查看</text>
						</view>
						<view class="item_actions_item" v-if="!item.auditStatus"
							@click="actions({type:'audit',data:item})">
							<u-icon name="pushpin-fill"></u-icon>
							<text class="actions_text">通过</text>
						</view>
						<view class="item_actions_item" v-if="item.auditStatus">
							<u-tag type="success" size="mini" text="已通过"></u-tag>
						</view>
						<!-- <view class="item_actions_item" v-if="!item.auditStatus" @click="actions('edit',item)">
							<u-icon name="edit-pen-fill"></u-icon>
							<text class="actions_text">编辑</text>
						</view> -->
					</view>
				</template>
			</uni-card>
		</view>
		<u-empty mode="message" text="无内容" iconColor="#5976ba" v-if="currentMeterId && !recordList.length">
		</u-empty>

		<!-- 消息通知 -->
		<u-toast ref="uToast"></u-toast>
		<!-- 审批结果 -->
		<u-modal :show="auditShow" content='确认将该条抄表记录通过吗?' showCancelButton confirmText="通过" cancelText="再想想"
			@confirm="agree" @cancel="auditShow = false"></u-modal>
	</view>
</template>

<script>
	import {
		meterList,
		getAllRecord,
		auditAgree
	} from '@/apis/meter.js'
	export default {
		data() {
			return {
				meterQueryForm: {
					page: 1,
					size: 999,
					electricityNo: null
				},
				currentMeterId: null,
				currentMeter: {},
				meterList: [],
				recordList: [],
				selectShow: false,
				auditShow: false,
				currentRecord: {}
			}
		},
		onLoad(options) {
			if (options.data) {
				const data = JSON.parse(options.data)
				this.currentMeterId = data.id
				this.currentMeter = data
				this.getSendRecord(data.id)
			}
		},
		created() {
			this.getMeterList()
		},
		onReady() {
			if (!this.currentMeterId) {
				this.selectShow = true
				this.$refs.uToast.show({
					message: '请先选择电表',
					type: 'info',
					position: 'top'
				})
			}
		},
		methods: {
			async getMeterList() {
				const {
					data
				} = await meterList(this.meterQueryForm)
				this.meterList = data
			},
			async getSendRecord() {
				const {
					data
				} = await getAllRecord(this.currentMeterId)
				this.recordList = data
			},
			async selectMeter(item) {
				this.currentMeter = item
				this.currentMeterId = item.id
				await this.getSendRecord()
				setTimeout(() => {
					this.selectShow = false
				})
			},
			actions(obj) {
				switch (obj.type) {
					case 'view':
						uni.navigateTo({
							url: `/pages/meter/recordDetail?data=${JSON.stringify(obj.data)}`
						})
						break
					case 'audit':
						this.currentRecord = obj.data
						this.auditShow = true
						break
				}
			},
			async agree() {
				await auditAgree({
					ids: [this.currentRecord.id]
				})
				this.auditShow = false
				this.$refs.uToast.show({
					message: '已通过',
					type: 'success',
					position: 'top'
				})
				this.getSendRecord()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 20rpx;

		.record_list {
			position: absolute;
			top: 8%;
			left: 2%;
			right: 2%;
			bottom: 3%;
			overflow: auto;
			z-index: 555;

			.item_img {
				margin: 0 auto;
				width: 90%;
				height: 38%;
			}

			.item_body {
				margin-top: 20rpx;
				border-bottom: 1rpx solid #5976ba;

				.item_row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 10rpx 0;

					.item_cell {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;

						.item_tips {
							margin-right: 10rpx;
						}
					}
				}
			}

			.item_actions {
				padding: 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item_actions_item {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;

					::v-deep .u-icon__icon {
						font-size: 28rpx;
						font-weight: 700;
						margin-right: 5rpx;
					}
				}
			}
		}

		::v-deep .u-sticky {
			width: 100%;
			height: 8%;
			z-index: 666;

			.u-sticky__content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #5290FF;
				border-color: #5976ba;
				padding: 30rpx;
				color: #fff;
				font-size: 35rpx;
				font-weight: 700;
				border-radius: 0 0 20rpx 20rpx;

				.u-icon__icon {
					font-size: 50rpx !important;
					font-weight: 700 !important;
					color: #fff !important;
				}
			}
		}

		::v-deep .u-empty {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.meter_box {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, .3);
			z-index: 666;
		}
	}


	.meter_box>::v-deep .uni-card {
		position: absolute;
		top: 50%;
		left: 2%;
		right: 2%;
		border-radius: 5%;
		transform: translateY(-50%);
		border-color: #5976ba;
		background-color: #5290FF;
		padding: 0 !important;

		.uni-card__header-content-title {
			font-size: 40rpx;
			font-weight: 700;
			color: #fff !important;
		}

		.uni-card__content {
			background-color: #fff;
		}

		.meter_select {
			height: 600rpx;

			::v-deep .u-list {
				margin-top: 10rpx;
			}
		}
	}

	::v-deep .uni-card {
		border-radius: 5%;
		border-color: #5976ba;
	}
</style>